dateMenu: Make "today" button more prominent

Split the weekday from the date and increase the latter's size to
match the latest calendar mockups.

https://bugzilla.gnome.org/show_bug.cgi?id=744817

diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass
index 8409846c837c96f26533c7e9116c1009a4cc8bce..a1ea9bf18ae85deaffdedbf2f52c7c1a820086a9 160000 (submodule)
--- a/data/theme/gnome-shell-sass
+++ b/data/theme/gnome-shell-sass
@@ -1 +1 @@
-Subproject commit 8409846c837c96f26533c7e9116c1009a4cc8bce
+Subproject commit a1ea9bf18ae85deaffdedbf2f52c7c1a820086a9

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 29e53e5e664f03346bfab25186b69b3f30c53dcb..b5926c48b4ec5ddae19e406eab492e83d7b60f9f 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -589,19 +589,28 @@ StScrollBar {
   padding: 0.75em 1.0em; }
 
 .calendar {
-  margin: 0 1.5em;
   margin-bottom: 1em; }
 
+.calendar,
+.datemenu-today-button {
+  margin: 0 1.5em; }
+
 .datemenu-calendar-column {
   spacing: 0.5em;
   padding-bottom: 3em; }
 
-.datemenu-date-label {
-  padding: .4em 1.7em;
-  text-align: center;
-  color: #eeeeec;
-  font-weight: bold;
-  font-size: 110%; }
+.datemenu-today-button {
+  border-radius: 4px;
+  padding: .4em; }
+
+.datemenu-today-button:hover, .datemenu-today-button:focus {
+  background-color: #454c4c; }
+.datemenu-today-button:active {
+  color: white;
+  background-color: #215d9c; }
+
+.datemenu-today-button .date-label {
+  font-size: 1.5em; }
 
 .calendar-month-label {
   color: #e2e2df;

diff --git a/js/ui/dateMenu.js b/js/ui/dateMenu.js
index 673a752c0dc8c089b6a52a68e97cbdb18769019f..7ffc4e87c4704f2bd2b8367520fd8d4954145fa0 100644 (file)
--- a/js/ui/dateMenu.js
+++ b/js/ui/dateMenu.js
@@ -19,6 +19,65 @@ const PanelMenu = imports.ui.panelMenu;
 const PopupMenu = imports.ui.popupMenu;
 const Calendar = imports.ui.calendar;
 
+const TodayButton = new Lang.Class({
+    Name: 'TodayButton',
+
+    _init: function(calendar) {
+        // Having the ability to go to the current date if the user is already
+        // on the current date can be confusing. So don't make the button reactive
+        // until the selected date changes.
+        this.actor = new St.Button({ style_class: 'datemenu-today-button',
+                                     x_align: St.Align.START,
+                                     reactive: false
+                                   });
+        this.actor.connect('clicked', Lang.bind(this,
+            function() {
+                this._calendar.setDate(new Date(), false);
+            }));
+
+        let hbox = new St.BoxLayout({ vertical: true });
+        this.actor.add_actor(hbox);
+
+        this._dayLabel = new St.Label({ style_class: 'day-label',
+                                        x_align: Clutter.ActorAlign.START });
+        hbox.add_actor(this._dayLabel);
+
+        this._dateLabel = new St.Label({ style_class: 'date-label' });
+        hbox.add_actor(this._dateLabel);
+
+        this._calendar = calendar;
+        this._calendar.connect('selected-date-changed', Lang.bind(this,
+            function(calendar, date) {
+                // Make the button reactive only if the selected date is not the
+                // current date.
+                this.actor.can_focus = this.actor.reactive = !this._isToday(date)
+            }));
+    },
+
+    setDate: function(date) {
+        this._dayLabel.set_text(date.toLocaleFormat('%A'));
+
+        /* Translators: This is the date format to use when the calendar popup is
+         * shown - it is shown just below the time in the shell (e.g. "Tue 9:29 AM").
+         */
+        let dateFormat = Shell.util_translate_time_string (N_("%B %e %Y"));
+        this._dateLabel.set_text(date.toLocaleFormat(dateFormat));
+
+        /* Translators: This is the accessible name of the date button shown
+         * below the time in the shell; it should combine the weekday and the
+         * date, e.g. "Tuesday February 17 2015".
+         */
+        let dateFormat = Shell.util_translate_time_string (N_("%A %B %e %Y"));
+        this.actor.accessible_name = date.toLocaleFormat(dateFormat);
+    },
+
+    _isToday: function(date) {
+        let now = new Date();
+        return now.getYear() == date.getYear() &&
+               now.getMonth() == date.getMonth() &&
+               now.getDate() == date.getDate();
+    }
+});
 
 const DateMenuButton = new Lang.Class({
     Name: 'DateMenuButton',
@@ -46,9 +105,6 @@ const DateMenuButton = new Lang.Class({
         this._calendar.connect('selected-date-changed',
                                Lang.bind(this, function(calendar, date) {
                                    this._eventList.setDate(date);
-
-                                   // Make the button reactive only if the selected date is not the current date.
-                                   this._date.can_focus = this._date.reactive = !this._isToday(date)
                                }));
 
         // Whenever the menu is opened, select today
@@ -56,12 +112,7 @@ const DateMenuButton = new Lang.Class({
             if (isOpen) {
                 let now = new Date();
                 this._calendar.setDate(now);
-
-                /* Translators: This is the date format to use when the calendar popup is
-                 * shown - it is shown just below the time in the shell (e.g. "Tue 9:29 AM").
-                 */
-                let dateFormat = Shell.util_translate_time_string (N_("%A %B %e, %Y"));
-                this._date.set_label(now.toLocaleFormat(dateFormat));
+                this._date.setDate(now);
             }
         }));
 
@@ -74,18 +125,8 @@ const DateMenuButton = new Lang.Class({
                                   vertical: true });
         hbox.add(vbox);
 
-        // Date
-        // Having the ability to go to the current date if the user is already
-        // on the current date can be confusing. So don't make the button reactive
-        // until the selected date changes.
-        this._date = new St.Button({ style_class: 'datemenu-date-label',
-                                     reactive: false
-                                   });
-        this._date.connect('clicked',
-                           Lang.bind(this, function() {
-                               this._calendar.setDate(new Date(), false);
-                           }));
-        vbox.add(this._date, { x_fill: false  });
+        this._date = new TodayButton(this._calendar);
+        vbox.add_actor(this._date.actor);
 
         vbox.add(this._calendar.actor);
 
@@ -120,13 +161,6 @@ const DateMenuButton = new Lang.Class({
         this._sessionUpdated();
     },
 
-    _isToday: function(date) {
-        let now = new Date();
-        return now.getYear() == date.getYear() &&
-               now.getMonth() == date.getMonth() &&
-               now.getDate() == date.getDate();
-    },
-
     _appInstalledChanged: function() {
         this._calendarApp = undefined;
         this._updateEventsVisibility();